<template>
  <div>
    <el-form :model='searchList' ref='searchList' size='normal'>
      <el-row :gutter='20'>
        <el-col :span='8' :offset='0'>
          <el-form-item label="">
            <el-input v-model="searchList.project_name" placeholder="请输入项目名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='8' :offset='0'>
          <el-form-item label="">
            <el-input v-model="searchList.company_name" placeholder="请输入保障部门"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='8' :offset='0'>
          <div class="right">
            <el-button type='primary' size='medium' @click='search'>查询</el-button>
            <el-button type="primary" size="medium" @click="handleExpand" :loading="loading">
              <i :class="isExpand?'el-icon-remove-outline':'el-icon-circle-plus-outline'"></i>
              {{isExpand?'关闭全部行':'展开全部行'}}
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data='tableData' border stripe :height='offsetHeight' v-loading='loading' ref='table' row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column label='名称' min-width='80' align='left' header-align="center" tree>
        <template slot-scope='{row}'>
          {{row.name}}
        </template>
      </el-table-column>
      <el-table-column label='金额' align='center' width="150">
        <template slot-scope='{row}'>
          <span v-if="row.grade =='1'">{{row.pr_service_amount ? row.pr_service_amount.toFixed(4):'0' }}</span>
          <span v-else-if="row.grade =='2'">{{row.pa_service_amount ? row.pa_service_amount.toFixed(4):'0' }}</span>
          <span v-else-if="row.grade =='3'">{{row.su_service_amount ? row.su_service_amount.toFixed(4):'0' }}</span>
        </template>
      </el-table-column>
      <el-table-column label='项目状态' width='150' align='center'>
        <template slot-scope='{row}'>
          {{row.status | f_bidTtypeRename}}
        </template>
      </el-table-column>
      <el-table-column label='操作' width='300' align='center'>
        <template slot-scope='{row}'>
          <template v-if="row.grade=='1'">
            <el-button-group>
              <el-button type="success" size="mini" @click="exportReport(row.id)">导出报告</el-button>
            </el-button-group>
          </template>
          <template v-else-if="row.grade=='3'">
            <el-button-group>
              <el-button type="green" size="mini" @click="toIt(row)">查看IT资产及服务</el-button>
              <el-button type="warning" size="mini" @click="addTargetVar(row.id)">招标技术参数</el-button>
            </el-button-group>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 招标技术参数信息 -->
    <el-drawer title="招标技术参数" :visible.sync="targetVarShow" size="70%" :destroy-on-close="true"
      :wrapperClosable="false">
      <target-var-item ref="targetVar" @cancel="cancel" @init="init" :targetVarParams="targetVarParams">
      </target-var-item>
    </el-drawer>
    <block-report-item v-show="false" ref="blockReport"></block-report-item>
  </div>
</template>

<script>
import TargetVarItem from '@/components/Bid/TargetVar.vue'
import BlockReportItem from '@/components/Report/BlockReport'
import { f_bidTtypeRename } from '@/utils/filters'
export default {
  name: 'BidEnsureNoFinish',
  components: {
    TargetVarItem, BlockReportItem
  },
  props: {
    switch: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 270,
      loading: false,
      saveLoading: false,
      searchList: {},
      tableData: [],
      titleList: {},
      isExpand: false,
      targetVarShow: false,
      targetVarParams: {},
    }
  },
  created () {
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      const res1 = await this.$http('blockDoList', {
        del_flag: '0',
        source: '1',
        level: '2',
        ...this.searchList
      })
      this.tableData = res1
      this.loading = false
    },
    search () {
      this.isExpand = true
      this.init()
      this.handleExpand()
    },
    addTargetVar (id) {
      this.targetVarParams = {
        id: id,
      }
      this.targetVarShow = true
    },
    toIt (item) {
      sessionStorage.setItem("bidInfo",
        JSON.stringify({
          id: item.id,
          source: '1',
          titleName: item.name + '——' + item.package_name + '——' + item.project_name,
        })
      );
      this.$emit('toIt', this.switch);
    },
    cancel () {
      this.targetVarShow = false
      this.targetVarParams = {}
    },
    async exportReport (id) {
      this.saveLoading = true
      await this.$refs.blockReport.writerUpdate(id)
      this.saveLoading = false
    },
    // 是否展开table(展开与折叠切换)
    handleExpand () {
      this.isExpand = !this.isExpand
      this.$nextTick(() => {
        this.forArr(this.tableData, this.isExpand)
      })
    },
    // 遍历
    forArr (arr, isExpand) {
      arr.forEach(i => {
        // toggleRowExpansion(i, isExpand)用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        this.$refs.table.toggleRowExpansion(i, isExpand)
        if (i.children) {
          this.forArr(i.children, isExpand)
        }
      })
    },
  },
  computed: {
  },
  filters: {
    f_bidTtypeRename: f_bidTtypeRename
  }
}
</script>
<style lang='scss' scoped>
</style>